<template>
  <div
    class="photo-album-container"
    ref="container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
  <div
  class="image-container"
  :style="{ transform: `scale(${state.scale}) translate(${state.translateX}px, ${state.translateY}px)` }"
  >
  1-{{ state.scale }}
  <div></div>
  1-{{ state.translateX }}
      <img
        ref="image"
        :src="images[0]"
        class="album-image"
      />
    </div>
  </div>
</template>

<script  setup>
import { ref, reactive, computed } from 'vue'
const images = reactive(['https://img0.baidu.com/it/u=3289314896,2954873764&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800'])
const initialIndex = ref(0)
const container = ref(null)
const image = ref(null)
const state = reactive({
  scale: 1,
  translateX: 0,
  translateY: 0,
  startX: 0,
  startY: 0,
  initialDistance: 0,
  initialScale: 1,
  startTranslateX: 0,
  startTranslateY: 0,
  containerWidth: 0,
  containerHeight: 0,
  imgWidth: 0,
  imgHeight: 0,
  currentIndex: initialIndex.value
})

const getDistance = (t1, t2) => {
  const dx = t1.clientX - t2.clientX
  const dy = t1.clientY - t2.clientY
  return Math.sqrt(dx * dx + dy * dy)
}

const getCenter = (t1, t2) => ({
  x: (t1.clientX + t2.clientX) / 2,
  y: (t1.clientY + t2.clientY) / 2
})

const checkBoundaries = () => {
  const scaledWidth = state.imgWidth * state.scale
  const scaledHeight = state.imgHeight * state.scale

  // Horizontal boundaries
  let minTx, maxTx
  if (scaledWidth > state.containerWidth) {
    minTx = state.containerWidth - scaledWidth
    maxTx = 0
  } else {
    minTx = maxTx = (state.containerWidth - scaledWidth) / 2
  }
  state.translateX = Math.max(minTx, Math.min(state.translateX, maxTx))

  // Vertical boundaries
  let minTy, maxTy
  if (scaledHeight > state.containerHeight) {
    minTy = state.containerHeight - scaledHeight
    maxTy = 0
  } else {
    minTy = maxTy = (state.containerHeight - scaledHeight) / 2
  }
  state.translateY = Math.max(minTy, Math.min(state.translateY, maxTy))
  console.log(1111, state.translateX, state.translateY)
}

// const handleImageLoad = () => {
//   state.imgWidth = image.value.naturalWidth
//   state.imgHeight = image.value.naturalHeight
//   state.containerWidth = container.value.clientWidth
//   state.containerHeight = container.value.clientHeight
  
//   // Center image initially
//   state.translateX = (state.containerWidth - state.imgWidth) / 2
//   state.translateY = (state.containerHeight - state.imgHeight) / 2
// }

const handleTouchStart = (e) => {
  if (e.touches.length === 2) {
    const t1 = e.touches[0]
    const t2 = e.touches[1]
    state.initialDistance = getDistance(t1, t2)
    state.initialScale = state.scale
    state.startTranslateX = state.translateX
    state.startTranslateY = state.translateY
  } else if (e.touches.length === 1) {
    const touch = e.touches[0]
    state.startX = touch.clientX
    state.startY = touch.clientY
    state.startTranslateX = state.translateX
    state.startTranslateY = state.translateY
  }
}

const handleTouchMove = (e) => {
  e.preventDefault()
  
  if (e.touches.length === 2) {
    // Handle zoom
    const t1 = e.touches[0]
    const t2 = e.touches[1]
    const currentDistance = getDistance(t1, t2)
    const newScale = Math.min(
      Math.max(
        (currentDistance / state.initialDistance) * state.initialScale,
        1
      ),
      3
    )

    const center = getCenter(t1, t2)
    state.translateX = center.x - (center.x - state.startTranslateX) * (newScale / state.initialScale)
    state.translateY = center.y - (center.y - state.startTranslateY) * (newScale / state.initialScale)
    state.scale = newScale
    
    checkBoundaries()
  } else if (e.touches.length === 1 && state.scale > 1) {
    // Handle pan
    const touch = e.touches[0]
    const deltaX = touch.clientX - state.startX
    const deltaY = touch.clientY - state.startY
    state.translateX = state.startTranslateX + deltaX
    state.translateY = state.startTranslateY + deltaY
    
    checkBoundaries()
  }
}

const handleTouchEnd = () => {
  console.log(state.scale)
  // Reset initial values
  state.startX = 0
  state.startY = 0
  state.initialDistance = 0
}

</script>

<style>
.photo-album-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  touch-action: none;
  background-color: red;
}

.image-container {
  position: absolute;
  will-change: transform;
}

.album-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}
</style>